<template>
	<view>
		<!-- #ifdef MP-WEIXIN -->
		<view v-if='isStyle == 1' class="head" :class="isScroll?'page_scroll':''"
			:style="[headStyleClass]">
			<view class="head_l" v-if="backIsShow==1">
				<view class="back_box" @click="backClick" v-if="isBack==1">
					<image class="back_img" src="../../static/head_left.png" mode="" v-if="backWhite==0"></image>
					<image class="back_img" src="../../static/head_left_white.png" mode="" v-if="backWhite==1"></image>
				</view>
				<view class="back_box" @click="choseLogin" v-if="isBack==3">
					<image class="back_img_close" src="../../static/close.png" mode=""></image>
				</view>
				<view class="back_box" @click="choseLogin" v-if="isBack==2">
					<image class="back_img" src="../../static/home_pay.png" mode=""></image>
				</view>
				<view class="back_box" @click="choseLogin" v-if="isBack==4">
					<image class="back_img" src="../../static/head_left.png" mode=""></image>
				</view>
			</view>
			<text :style="{'color': txtColor}">{{title}}</text>
			<slot name="content"></slot>
			<view class="zw"></view>
		</view>
		<view class="headOther" v-if='isStyle == 2' :style="[headStyleClass]">
			<slot name="content"></slot>
		</view>
		<view :style="{'height': heightVeiw}"></view>
		<!-- #endif -->
	</view>
</template>

<script>
	export default {
		name: "head-navigation",
		props: {
			title: { //标题
				type: String,
				default: ' '
			},
			isStyle: { //显示样式
				type: Number,
				default: 1
			},
			backgroundColor: { //背景色 
				type: String,
				default: '',
			},
			txtColor: { //标题颜色
				type: String,
				default: '#000000',
			},
			isBack: { //返回箭头显示情况（标题居中的情况）
				type: Number,
				default: 1, // 0：不显示，1：返回箭头 2：回到主页 3:关闭页面
			},
			backIsShow: { //返回箭头是否显示（标题靠左）
				type: Number,
				default: 1, // 0：不显示，1：显示
			},
			backWhite: { //是否是白色返回箭头
				type: Number,
				default: 0, // 0：否，1：是
			},
			zIndex: { //是否是白色返回箭头
				type: Number,
				default: 12, // 0：否，1：是
			},
			isScroll:{
				type: Boolean,
				default: false
			},
			styleClass:{
				type: Object,
				default: () => ({})
			}
		},
		data() {
			return {
				paddingButtom: '10rpx', //底部高度
				height: '',
				paddingTop: '',
				heightVeiw: '',
				// isScroll: false, //监听屏幕是否滑动
			};
		},
		computed: {
			headStyleClass() {
				var { height,backgroundColor,paddingTop,paddingButtom,zIndex,styleClass }  = this
				var obj = {
					height:height,
					backgroundColor:backgroundColor,
					paddingTop:paddingTop,
					paddingBottom:paddingButtom,
					zIndex:zIndex
				}
				// console.log('styleClass',styleClass)
				var formData = Object.assign(obj,styleClass)
				return formData
			}
		 },
		created() {

			// #ifdef APP
			// this.height = uni.getSystemInfoSync().titleBarHeight + "px"
			// this.paddingTop = (uni.getSystemInfoSync().statusBarHeight + 10) + "px"
			// this.heightVeiw = (this.height + this.paddingTop + 10) +'px'
			// this.paddingButtom = '22rpx'
			this.height = 40 + 'px'
			this.paddingTop = (uni.getSystemInfoSync().statusBarHeight + 10) + 'px'
			this.paddingButtom = '22rpx'
			this.heightVeiw = 40 + (uni.getSystemInfoSync().statusBarHeight + 20) + 'px'
			// #endif
			// #ifdef H5
			this.height = 50 + "px"
			this.paddingTop = 0 + "px"
			// #endif 
			// #ifndef APP || H5
			const demo = uni.getMenuButtonBoundingClientRect()
			this.height = demo.height + "px"
			this.paddingTop = demo.top + "px"
			this.heightVeiw = demo.height + demo.top + 4 + 'px'

			// #endif
			// #ifdef H5
			  if(!this.$queue.isEmpty(this.title)){
				  uni.setNavigationBarTitle({
				  	title:this.title
				  })
			   }
			// #endif

			this.$emit('getBarHight', this.heightVeiw)
		},
		// mounted() {
		// 	var that = this;
		// 	uni.$on('onPageScroll', function(data) {
		// 		if (data >= 25) {
		// 			that.isScroll = true
		// 		} else if (data == 0) {
		// 			that.isScroll = false
		// 		}
		// 		// console.log(that.isScroll)
		// 	});
		// },
		methods: {
			backClick() { //返回
				uni.navigateBack({
					delta: 1
				})
			},
			// 关闭登录页
			choseLogin() {
				this.$emit('choseLogin')
			}

		}
	}
</script>

<style scoped>
	view {
		box-sizing: content-box;
	}

	.head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 34rpx;
		font-weight: bold;
		/* color: #000; */
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 12;
	}
	.headOther{
		z-index: 9;
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 12;
	}
	.head_l {
		width: 90rpx;
	}

	.back_box {
		width: 90rpx;
		display: flex;
		justify-content: center;
	}

	.back_img {
		width: 36rpx;
		height: 34rpx;
	}

	.back_img_close {
		width: 32rpx;
		height: 32rpx;
	}

	.zw {
		width: 90rpx;
	}

	.page_scroll {
		animation: active 1s forwards ease-in-out;
		background-color: #fff !important;

	}

	.page_scroll text {
		animation: active 0.4s forwards ease-in-out;
		color: #000 !important;
	}

	@keyframes active {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;

		}
	}
</style>